<template>
    <div class="container">
        <div class="notice">
            <van-notice-bar  background="transparent" 
                left-icon="volume-o"
                :text="noticeMessage"/>
        </div>
            <div class="myaudio">
                <MyAudio ref="myaudio" audio-autoplay/>
            </div>
        <div class="bowl">
            <img :src="bowlImg" alt="" class="bg_img">
            <div v-if="rptIsShow">
                <img v-for="(item,index) in ranRptList" :key="index" :src="rptList[item-1]" alt="" class="redpacket"
                    :id="'r'+(index+1)">
            </div>
        </div>
        <div class="audio" style="width:0;height:0;overflow:hidden;">
            <audio id="audio" :src="soundUrl" ref="shakeAudio">
                您的浏览器不支持 audio 标签。
            </audio>
            <audio id="audioEnd"  ref="shakeAudioEnd">
                您的浏览器不支持 audio 标签。
            </audio>
        </div>
        <!-- <div class="btn" :disabled="true" @click="start">开始游戏</div> -->
        <van-button type="warning btn-start" :disabled="startDisabled" :round="true" @click="startBobing">开始</van-button>
        <div class="bth-right">
            <div class="right-menu" @click="ruleClick">
                <img src="../../static/rule.png"/>
                <p>规则</p>
            </div>
            <div class="right-menu" @click="myClick">
                <img src="../../static/my.png"/>
                <p>我的</p>
            </div>
             <div class="right-menu" @click="rankClick">
                <img src="../../static/rank.png"/>
                <p>排行榜</p>
            </div>
            <div class="right-menu" @click="regist">
                <img src="../../static/regist.png"/>
                <p>注册</p>
            </div>            
        </div>
        <div class="footer-info" @click="selectStart">
            <p class="p-info">剩余次数:{{currentUser.times}}</p>
        </div>
        <van-popup v-model="showPopup" get-container="#container" 
            @close="closePopup">
            <Lamp :user-name="lampUserName" @clickLamp="clickLamp"/>
        </van-popup>
        <van-popup
            v-model="showPassword"
            position="top"
            :style="{ height: '20%' }">
            <van-cell-group>
                <van-cell>
                <van-field v-model="password" label-width="50px" center clearable type="password" label="密码" placeholder="请输入密码">
                </van-field>
                </van-cell>
                <van-cell>
                <van-field  type="digit" label-width="50px" center clearable>
                <van-button slot="button" size="small" type="primary" @click="commitStart(1)">开始活动</van-button>
                <van-button class="btn-reset" slot="button" size="small" type="danger" @click="commitStart(0)">重置活动</van-button>
                </van-field>
                </van-cell>
            </van-cell-group>
        </van-popup>
        <!-- <select name="choice" v-model="modelSelected">
            <option :value="model.type" :key="index" v-for="(model,index) in modelList">{{model.name}}</option>
        </select> -->
    </div>
</template>
<script src="./home.js">
</script>
<style lang="scss" scoped>
   @import "./home.scss";
</style>